<template>
  <div class="top-window themecolor" :class="{ shrink: isShrunk }">
    <div class="leftbox" @click="this.$router.push('/index')">
      <div class="lefttitle1 titlecolor">南岛语族</div>
      <div class="lefttitle2 titlecolor">国家和地区</div>
    </div>
    <div class="rightbox">
      <div class="rightselect titlecolor" :class="{'active': routePath === '/country', 'cancursor': topPath.includes(routePath)}" @click="ToOtherPage('/country')">Information</div>
      <div class="rightselect titlecolor">Culture</div>
      <!-- <div class="rightselect titlecolor">view</div>
      <div class="rightselect titlecolor">Music</div> -->
      <div class="rightselect titlecolor" :class="{'active': routePath === '/relation', 'cancursor': topPath.includes(routePath)}" @click="ToOtherPage('/relation')">Relation</div>
      <div v-if="Object.keys(userData).length !== 0" class="login" @click="toLogin()">登录</div>
      <div v-else class="hadlogin">
        <img src="@/assets/img/icon/userimg.png" alt="头像失效">
        <img @click="logout()" src="@/assets/img/icon/logout.png" alt="登出失效">
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      lastScrollTop: 0,
      isShrunk: false,
      login: true,
      routePath: '',// 记录当前页面的路径
      topPath: ['/country', '/relation'] // 顶部导航栏有几个页面路径就写几个
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      if (scrollTop > 100) { // 当滚动距离超过100px
        if (scrollTop > this.lastScrollTop) {
          // 向下滚动
          this.isShrunk = true;
        } else {
          // 向上滚动
          this.isShrunk = false;
        }
      } else {
        // 如果滚动距离小于100px，确保 header 还原
        this.isShrunk = false;
      }
      this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // 处理负滚动
    },
    toLogin() {
      this.$router.push('/login');
    },
    logout() {
      localStorage.removeItem('token');
      this.$router.push('/login')
    },
    ToOtherPage(path) {
      if(this.routePath!==path && this.topPath.includes(this.routePath)){
        this.$router.push(`${path}?id=`+ this.$route.query.id);
      }
    }
  },
  computed: {
    ...mapState('dataStore', ['userData'])
  },
  created() {
    this.routePath = this.$route.path;
    console.log(this.$route.query.id);
  }
}
</script>

<style scoped lang="scss">
$Height: 60px;
.top-window {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: $Height;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    .leftbox {
      font-size: 20px;
      font-weight: bold;
      margin-left: 40px;
      cursor: pointer;
      .lefttitle2{
        margin-left: 40px;
      }
    }
    .rightbox {
      display: flex;
      height: 100%;
      .active {
        border-bottom: 4px solid white;
      }
      .cancursor {
        cursor: pointer !important;  
      }
      .rightselect {
        font-size: 18px;
        font-weight: bold;
        margin-right: 40px;
        display: flex ;
        align-items: center;
        cursor: not-allowed;
      }
      .login {
        font-size: 15px;
        font-weight: bold;
        margin-right: 40px;
        text-align: center;
        color: rgb( 29, 100, 178);
        background-color: white;
        border-radius: 5px;
        padding: 5px 10px;
        cursor: pointer;
      }
      .hadlogin {
        display: flex;
        align-items: center;
        margin-right: 40px;
        img {
          $size: 20px;
          width: $size;
          height: $size;
          margin-right: 20px;
        }
      }
    }
}
.top-window.shrink {
  transition: all 0.4s ease;
  transform: translateY(-$Height); /* 使其上移 */
}
</style>